<template>
    <div>
        <input type="color" id="color-picker" v-model="selectedColor" @input="handleColorChange" />
    </div>
</template>

<script setup>
import { ref } from "vue"
const props = defineProps(['color'])
const emits = defineEmits(['update:color'])
const selectedColor = ref('');

const handleColorChange = () => {
    // 在这里可以添加额外的逻辑，比如验证颜色值或触发其他事件  
    console.log('Color changed to:', selectedColor.value);
    emits('update:color', selectedColor.value);
};  
</script>

<style lang="scss" scoped></style>